<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>雇主评价</title>
    <link rel="stylesheet" type="text/css" href="../../../css/aui/aui.css" />
    <style>
        .aui-tab:after {
            content: '';
            position: absolute;
            left: 0;
            bottom: 0;
            right: auto;
            top: auto;
            height: 1px;
            width: 100%;
            background-color: #dddddd;
            display: block;
            z-index: 2;
            -webkit-transform-origin: 50% 100%;
            transform-origin: 50% 100%;
        }

        .evaluate_content {
            font-size: .6rem;
            border-bottom: 1px solid #E4E5E5;
            margin: 0;
            padding: 0.75rem;
        }

        .user_head_info {
            display: flex;
            justify-content: space-between;
            margin: 0 0 0.6rem 0;
        }

        .user_portrait {
            width: 2.2rem;
            height: 2.2rem;
            border-radius: 100%;
        }

        .user_portrait img {
            width: 2.2rem;
            height: 2.2rem;
            border-radius: 100%;
        }

        .user_info {
            width: calc(100% - 2.5rem);
            display: flex;
            flex-direction: column;
            justify-content: space-between;
        }

        .list-item-inner {
            display: flex;
            justify-content: space-between;
        }

        .photo_album {
            margin-top: .75rem;
            margin-bottom: .75rem;
        }

        .photo_album .aui-col-xs-4 {
            height: 33.33333333vw;
            overflow: hidden;
        }

        .photo_album .aui-col-xs-4 img {
            width: 100%;
            height: 100%;
            border:1px solid #eee;
        }

        .reply_content {
            background: #F3F3F3;
            padding: 0.5rem;
        }
    </style>
</head>

<body>
    <div id="app">
        <div class="aui-tab" id="tab">
            <div class="aui-tab-item aui-active">好评</div>
            <div class="aui-tab-item">中评</div>
            <div class="aui-tab-item">差评</div>
        </div>
        <div class="tab-item-content">
            <div class="tab-content">
                <div class="aui-content evaluate_content" v-for="data in goodsComment.list">
                    <div class="user_head_info">
                        <div class="user_portrait"><img :src="data.headimgurl" alt=""></div>
                        <div class="user_info">
                            <div class="list-item-inner">
                                <div class="list-item-title">{{data.user_name}}</div>
                                <div class="list-item-right" style="color:#C2C2C2;"><small>{{data.create_time}}</small></div>
                            </div>
                            <div class="list-item-inner" style="justify-content: flex-end;">
                                <div class="list-item-right" style="color:#C2C2C2;"><small>星级评分：{{data.score}}</small></div>
                            </div>
                        </div>
                    </div>
                    <div>{{data.comment}}</div>
                    <div class="aui-row-padded photo_album">
                        <div class="aui-col-xs-4" v-for="imgs in data.comment_image_array"><img :src="imgs" alt=""></div>
                        <div style="clear:both;"></div>
                    </div>
                    <div class='reply_content' v-if="data.comment_status == 2">
                        <div>工人回复：</div>
                        <div>{{data.reply_comment}}</div>
                    </div>
                </div>
            </div>
            <div class="tab-content">
                <div class="aui-content evaluate_content" v-for="data in middleComment.list">
                    <div class="user_head_info">
                        <div class="user_portrait"><img :src="data.headimgurl" alt=""></div>
                        <div class="user_info">
                            <div class="list-item-inner">
                                <div class="list-item-title">{{data.user_name}}</div>
                                <div class="list-item-right" style="color:#C2C2C2;"><small>{{data.create_time}}</small></div>
                            </div>
                            <div class="list-item-inner" style="justify-content: flex-end;">
                                <div class="list-item-right" style="color:#C2C2C2;"><small>星级评分：{{data.score}}</small></div>
                            </div>
                        </div>
                    </div>
                    <div>{{data.comment}}</div>
                    <div class="aui-row-padded photo_album">
                        <div class="aui-col-xs-4" v-for="imgs in data.comment_image_array"><img :src="imgs" alt=""></div>
                        <div style="clear:both;"></div>
                    </div>
                    <div class='reply_content' v-if="data.comment_status == 2">
                        <div>工人回复：</div>
                        <div>{{data.reply_comment}}</div>
                    </div>
                </div>
            </div>
            <div class="tab-content">
                <div class="aui-content evaluate_content" v-for="data in badComment.list">
                    <div class="user_head_info">
                        <div class="user_portrait"><img :src="data.headimgurl" alt=""></div>
                        <div class="user_info">
                            <div class="list-item-inner">
                                <div class="list-item-title">{{data.user_name}}</div>
                                <div class="list-item-right" style="color:#C2C2C2;"><small>{{data.create_time}}</small></div>
                            </div>
                            <div class="list-item-inner" style="justify-content: flex-end;">
                                <div class="list-item-right" style="color:#C2C2C2;"><small>星级评分：{{data.score}}</small></div>
                            </div>
                        </div>
                    </div>
                    <div>{{data.comment}}</div>
                    <div class="aui-row-padded photo_album">
                        <div class="aui-col-xs-4" v-for="imgs in data.comment_image_array"><img :src="imgs" alt=""></div>
                        <div style="clear:both;"></div>
                    </div>
                    <div class='reply_content' v-if="data.comment_status == 2">
                        <div>工人回复：</div>
                        <div>{{data.reply_comment}}</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
<script src="../../../script/api.js" charset="utf-8"></script>
<script src="../../../script/aui/aui-tab.js" charset="utf-8"></script>
<script src="../../../script/common/jquery-3.3.1.min.js" charset="utf-8"></script>
<script src="../../../script/common/common.js" charset="utf-8"></script>
<script src="../../../script/common/config.js" charset="utf-8"></script>
<script src="../../../script/common/vue.min.js" charset="utf-8"></script>
<script>
    apiready = function() {
        api.parseTapmode();
        vm.init();
    }

    var vm = new Vue({
        el: "#app",
        data: {
            goodsComment: {
                list: [],
                pages: 1
            },
            middleComment: {
                list: [],
                pages: 1
            },
            badComment: {
                list: [],
                pages: 1
            },
            index: 0
        },
        methods: {
            init() {
                this.tab();
                this.page();
                this.getGoodsComment();
                this.getMiddleComment();
                this.getBadComment();
            },
            tab() {
                this.index = api.pageParam.index;
                $(".tab-content").eq(this.index).show().siblings().hide();
                var self = this;
                var tab = new auiTab({
                    element: document.getElementById("tab"),
                    index: api.pageParam.index + 1,
                    repeatClick: false
                }, function(ret) {
                    self.index = ret.index - 1;
                    $(".tab-content").eq(self.index).show().siblings(".tab-content").hide();
                });
            },
            getGoodsComment() {
                var self = this;
                _ajax(Config.api.UserGoodsComment, {
                    user_id: api.pageParam.id,
                    pages: self.goodsComment.pages
                }, function(res) {
                    if (res.code === 200) {
                        if (res.data.length === 0) {
                            self.goodsComment.pages = -1
                        } else {
                            self.goodsComment.list = self.goodsComment.list.concat(res.data);
                        }
                    }
                })
            },
            getMiddleComment() {
                var self = this;
                _ajax(Config.api.UserMiddleComment, {
                    user_id: api.pageParam.id,
                    pages: self.middleComment.pages
                }, function(res) {
                    if (res.code === 200) {
                        if (res.data.length === 0) {
                            self.middleComment.pages = -1
                        } else {
                            self.middleComment.list = self.middleComment.list.concat(res.data);
                        }
                    }
                })
            },
            getBadComment() {
                var self = this;
                _ajax(Config.api.UserBadComment, {
                    user_id: api.pageParam.id,
                    pages: self.badComment.pages
                }, function(res) {
                    if (res.code === 200) {
                        if (res.data.length === 0) {
                            self.badComment.pages = -1
                        } else {
                            self.badComment.list = self.badComment.list.concat(res.data);
                        }
                    }
                })

            },
            page() {
                // 下拉刷新
                var self = this;
                push_down(function() {
                    //下拉刷新恢复
                    push_down_over();

                    if (self.index == 0) {
                        self.goodsComment.pages = 1;
                        self.goodsComment.list = [];
                        self.getGoodsComment();
                    } else if (self.index == 1) {
                        self.middleComment.pages = 1;
                        self.middleComment.list = [];
                        self.getMiddleComment();
                    } else if (self.index == 2) {
                        self.badComment.pages = 1;
                        self.badComment.list = [];
                        self.getBadComment();
                    }
                });
                //上拉加载
                push_up(function() {
                    if (self.index == 0) {
                        if (self.goodsComment.pages === -1) {
                            $toast('数据已加载完毕');
                        } else {
                            ++self.goodsComment.pages;
                            self.getGoodsComment();
                        }
                    } else if (self.index == 1) {
                        if (self.middleComment.pages === -1) {
                            $toast('数据已加载完毕');
                        } else {
                            ++self.middleComment.pages;
                            self.getMiddleComment();
                        }
                    } else if (self.index == 2) {
                        if (self.badComment.pages === -1) {
                            $toast('数据已加载完毕');
                        } else {
                            ++self.badComment.pages;
                            self.getBadComment();
                        }
                    }
                });
            }
        }
    });
</script>

</html>
